<template>
    <el-form-item>
        <el-button @click="onSubmit">保存</el-button>
    </el-form-item>
    <h2 style="margin-left: 400px;">发酵液</h2>
    <table class="order-table">
        <tr>
            <th colspan="6" style="text-align: left;">基本信息</th>
        </tr>
        <tr>
            <td>样本编号：</td>
            <td><el-input v-model="form.sample" disabled /></td>
            <td>生产日期：</td>
            <td><el-date-picker v-model="form.produceDate" type="date" placeholder="Pick a date" style="width: 100%" />
            </td>
        </tr>
        <tr>
            <td>过滤设备编号：</td>
            <td><el-input v-model="form.deviceNumber" disabled /></td>
            <td>过滤方法：</td>
            <td><el-input v-model="form.filtrationMethod" /></td>
        </tr>
        <tr>
            <td>原麦汁浓度：</td>
            <td><el-input v-model="form.originalWort" /></td>
            <td>酒精度：</td>
            <td><el-input v-model="form.alcoholContent" /></td>
        </tr>
        <tr>
            <td>浊度：</td>
            <td><el-input v-model="form.turbidity" /></td>
            <td>色度：</td>
            <td><el-input v-model="form.chroma" /></td>
        </tr>
        <tr>
            <td>Ph值：</td>
            <td><el-input v-model="form.phValue" /></td>
            <td>溶解氧含量：</td>
            <td><el-input v-model="form.dissolvedLiquid" /></td>
        </tr>
        <tr>
            <td>微生物含量：</td>
            <td><el-input v-model="form.microbe" /></td>
            <td>苦味值：</td>
            <td><el-input v-model="form.bitternessValue" /></td>
        </tr>
        <tr>
            <td>泡面性能：</td>
            <td><el-input v-model="form.foamPerformance" /></td>
            <td>过滤前后指标对比：</td>
            <td><el-input v-model="form.filterMetrics" /></td>
        </tr>
        <tr>
            <td>备注：</td>
            <td colspan="3"><el-input v-model="form.remark" type="textarea" /></td>
        </tr>
    </table>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, onMounted } from 'vue'
import dayjs from 'dayjs'
import { useCounterStore } from "@/stores/counter";
import { ElMessage } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'
import {read,write} from '@/axios/axiosHelper'

const router = useRouter()
const route = useRoute()

const store = useCounterStore();

// do not use same name with ref
const form = reactive({
    filtrateId: route.query.filtrateId,
    sample: '',
    produceDate: '',
    deviceNumber: '',
    filtrationMethod: '',
    originalWort: '',
    alcoholContent: '',
    turbidity: '',
    chroma: '',
    phValue: '',
    dissolvedLiquid: '',
    microbe: '',
    bitternessValue: '',
    foamPerformance: '',
    filterMetrics: '',
    remark: ''
});

// 生成随机编号的函数
const generateRandomNumber = () => {
    // 生成前四位大写英文字母
    let letters = '';
    for (let i = 0; i < 4; i++) {
        letters += String.fromCharCode(Math.floor(Math.random() * 26) + 65);
    }
    // 生成后十位随机数字
    let numbers = '';
    for (let i = 0; i < 10; i++) {
        numbers += Math.floor(Math.random() * 10).toString();
    }
    return letters + numbers;
};

onMounted(() => {
    Fan();
})

const Fan = () => {
    read.get("f-read/api/Filtrate/ShowFiltrate", {
        params: {
            filtrateId: route.query.filtrateId
        }
    })
        .then(res => {
            form.sample = res.data.data[0].sample;
            form.produceDate = res.data.data[0].produceDate;
            form.deviceNumber = res.data.data[0].deviceNumber;
            form.filtrationMethod = res.data.data[0].filtrationMethod;
            form.originalWort = res.data.data[0].originalWort;
            form.alcoholContent = res.data.data[0].alcoholContent;
            form.turbidity = res.data.data[0].turbidity;
            form.chroma = res.data.data[0].chroma;
            form.phValue = res.data.data[0].phValue;
            form.dissolvedLiquid = res.data.data[0].dissolvedLiquid;
            form.microbe = res.data.data[0].microbe;
            form.bitternessValue = res.data.data[0].bitternessValue;
            form.foamPerformance = res.data.data[0].foamPerformance;
            form.filterMetrics = res.data.data[0].filterMetrics;
            form.remark = res.data.data[0].remark;
        })
}


// 在页面加载时生成样本编号
form.sample = generateRandomNumber();
// 在页面加载时生成过滤设备编号
form.deviceNumber = generateRandomNumber();

const onSubmit = () => {
    write.post("f-write/api/Filtrate/UpdFiltrate", form)
        .then(res => {
            if (res.data.code == 200) {
                ElMessage.success(res.data.msg)
                router.push("/QueryFiltrate")
            }
            else {
                ElMessage.error(res.data.msg)
                return;
            }
        })
}

</script>

<style scoped>
.order-table {
    border-collapse: collapse;
    width: 100%;
}

.order-table th,
.order-table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}

.order-table th {
    background-color: #f2f2f2;
}
</style>

<style scoped>
#app {
    padding: 20px;
}
</style>